<template>
  <div>
    <el-row>
      <el-form v-model="formData" label-position="top">
        <el-col :span="6">
           <el-form-item label="姓名">
             <el-input v-model="formData.name"></el-input>
           </el-form-item>
        </el-col>
        <el-col :span="6">
          值:{{formData.form}}<br/>
          <avue-input-tree default-expand-all v-model="formData.form" placeholder="请选择内容" :dic="dic"></avue-input-tree>
        </el-col>
        <el-col :span="24"></el-col>
        <el-col :span="6">
          包含父类值:{{formData.form1}}<br/>
          <avue-input-tree multiple v-model="formData.form1" placeholder="请选择内容"  :dic="dic"></avue-input-tree>
        </el-col>
      </el-form>
    </el-row>
    <el-row>
      <el-col>
        <avue-crud :option="option" :data="data" >
         <template slot-scope="row" slot="menu">
             {{row}}
         </template>
        </avue-crud>
      </el-col>
    </el-row>


    <el-button type="primary" @click="resetForm">清空表单</el-button>
    <avue-form ref="avueform" v-model="form" :option="option" @submit="submit"></avue-form>

    <el-button @click="getAFormDom">获取avueform表单属性dom</el-button>
  </div>
</template>

<script>
export default {
  name: "index",
  data(){
    return{
      form:{},
      formData:{
        name:'',
        form:'',
        form1:[0,1,2,3,4],
      },
      dic:[{
        label:'选项1',
        value:0,
        children:[{
          label:'选项3',
          value:2
        },{
          label:'选项4',
          value:3
        }]
      },{
        label:'选项2',
        value:1
      }],
      data: [{
        name: '姓名',
        sex: 14
      }],
      option: {
        header:false,
        column:[{
          label:'姓名',
          prop:'name'
        },{
            label: "日期",
            prop: "datetime1",
            type: "datetime",
            format:'yyyy年MM月dd日 HH时mm分ss秒',
            valueFormat:'yyyy-MM-dd HH:mm:ss'
          }, {
            label: "时间戳",
            prop: "datetime",
            type: "datetime",
            format: "yyyy-MM-dd hh:mm:ss",
            valueFormat: "timestamp",
          }]
      }
    }
  },
  methods:{
    //清空
    resetForm(){
      this.$refs.avueform.resetForm();
    },
    submit(){
      console.log("this.$refs.avueform:",this.$refs.avueform) ;
      this.$refs.avueform.getPropRef('name').disabled=false
      console.log("this.$refs.avueform.getPropRef('name'):", this.$refs.avueform.getPropRef('name'))
      this.$refs.avueform.validate((valid,done,msg)=>{
        if(valid){
            done()
        }
      })
    },
    getAFormDom(){
      console.log("dom:",this.$refs.avueform.getPropRef('name').$refs.temp.getLabelText)
    }
  }
}
</script>

<style scoped>

</style>